<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <title></title>


</head>
<body class="hold-transition skin-blue sidebar-mini">
<div th:fragment="historyNews">
    <style>
        .smokeCharts {
            width: 100%;
            height: 100%;
            right: -100%;
            height: 100% !important;
            /* padding-top: 0; */
            position: absolute;
            z-index: 10000;
            background-color: #111522;
        }

        .padding0 {
            padding: 0;
        }

        .dataStatistics {
            display: none;
            width: 100%;
            height: 100%;
            background: url(/public/images/dataStatistics.png) no-repeat;
            /* background-size: 100% 100%; */
        }

        .dataStatistics img {
            width: 100%;
            height: 100%;
        }

        .statisticsList {
            width: 33.3333%;
            height: 50%;
            float: left;
        }

        .statisticsClose {
            position: absolute;
            top: 30px;
            right: 30px;
        }

        .statisticsClose {
            width: 40px;
            height: 40px;
            background: url(/public/images/dataStatisticsBack.png) no-repeat;
            cursor: pointer;
        }

        .control-sidebar {
            right: -100%;
        }

        .dataSumAlarm {
            top: 281px;
            left: 914px;
            position: absolute;
            font-size: 24px;
            color: #defe5b;
        }

        .dataHandleNum {
            top: 281px;
            left: 1177px;
            position: absolute;
            font-size: 24px;
            color: #defe5b;
        }

        .dataSmokeSum {
            top: 281px;
            left: 635px;
            position: absolute;
            font-size: 24px;
            color: #defe5b;
        }

        .earlyWarningColor .table {
            width: 300px;
            height: 180px;
            overflow-y: auto;
            margin-top: 10px;
        }

        .earlyWarningColor {
            width: 280px;
            overflow: hidden;
        }

        .earlyWarningColorHid {
            width: 300px;
            height: 220px;
            overflow: hidden;
        }

        .dataStatistics .item {
            width: 127px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            cursor: pointer;
        }

        .dataStatistics .table p {
            height: 20px;
            letter-spacing: 2px;
        }

        .dataStatistics .list {
            height: 190px;
            width: 320px;
            position: absolute;
            top: 0;
            left: 166px;
        }

        .dataStatistics .listBox {
            position: absolute;
            top: 582px;
            left: 1400px;
            width: 490px;
            height: 220px;
            background: url(/public/images/middleDanger.png) no-repeat;
        }

        .dataCharts {
            width: 390px;
            height: 370px;
        }

        .dataStatistics .timeRun {
            position: absolute;
            top: 30px;
            right: 100px;
            color: #74f4ff;
            font-size: 22px;
        }

        #dataGuanZhu {
            position: relative;
        }

        .dataGuanZhu-list {
            position: absolute;
            top: 181px;
            left: 1451px;
            width: 450px;
            /* display: flex; */
            display: none;
            height: 265px;
            flex-direction: column;
        }

        .dataGuanZhu-list p {
            margin: 0 0 10px;
            flex: 1;
            align-items: center;
            justify-content: center;
            line-height: 100%;
            /*  text-align: center; */
            flex-direction: column;
            height: 28px;
        }

        /* .dataStatistics .list2{
            background:url(/public/images/highDanger.png) no-repeat;
        } */
        /* 		.control-sidebar-bg, .control-sidebar {
                    right: -100%;
                } */
    </style>
    <div class="historyNewsStyle">

        <aside class="control-sidebar control-sidebar-dark historyHeight openPublicSidebar smokeCharts "><!--  control-sidebar-open -->
            <div class="contorl-sidebar-halfheight-top" style="display:none;">
                <div class="sidebar-content-title">七日内报警统计</div>
                <!-- 插入chart -->
                <div class="sidebar-charts">
                    <div id="myChart" style="width: 330px;height:250px;"></div>
                    <div id="myCharts" style="width: 330px;height:250px;"></div>
                    <!-- 插入图表 -->
                </div>
                <div class="sidebar-content-title" id="guanzhu">七日内重点关注对象<span>（0）</span></div>
                <div class="sidebar-object-list">
                    <ul class="object-ul">
                        <!-- TODO -->
                    </ul>
                </div>
            </div>
            <div class="control-sidebar-halfheight" style="display:none;">
                <div class="sidebar-content-title historyTitle">七日内历史消息</div>
                <ul class="nav nav-tabs nav-justified control-sidebar-tabs historybtn">
                    <!-- 火警 -->
                    <li class="alarmhistorybtn active"><a href="#control-sidebar-theme-demo-options-tab"
                                                          data-toggle="tab"><i
                            class=""></i></a></li>
                    <!-- <span class="cover-alarm-tab"></span> /icons/cover.svg -->
                    <!-- 故障 -->
                    <li class="faulthistorybtn"><a href="#control-sidebar-home-tab" data-toggle="tab"><i
                            class="malfunction-tab"></i></a></li>
                    <!-- 低电 -->
                    <li class="lowhistorybtn"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i
                            class="low-electric-tab"></i></a></li>
                </ul>
                <div class="tab-content historyList">
                    <!--故障历史信息-->
                    <div class="tab-pane" id="control-sidebar-home-tab">
                        <!-- TODO -->
                    </div>
                    <!--火警历史信息-->
                    <div id="control-sidebar-theme-demo-options-tab" class="tab-pane active">
                        <!-- TODO -->
                    </div>
                    <!--低电历史信息-->
                    <div class="tab-pane" id="control-sidebar-settings-tab">
                        <!-- TODO -->
                    </div>
                </div>
            </div>
            <!-- 真实大数据 -->
            <div th:replace="main/data::data">

            </div>

            
            <!-- 演示大数据 -->
<!--             <div th:replace="main/demoData::demoData">

            </div> -->
            <div class="dataStatistics">
                <!-- <div class="dataCharts"> -->
                <div id="statisticsCanvas"
                     style="width: 360px;height:340px;position:absolute;top: 195px;left: 64px;"></div>
                <!-- </div> -->

                <div id="dataGuanZhu" style="width: 450px;height:300px;position:absolute;top: 155px;left: 1410px;">

                </div>
                <div class="dataGuanZhu-list">
                    <p></p>
                </div>
                <div class="timeRun"></div>
                <div class="statisticsClose"></div>
                <div class="dataSumAlarm"></div>
                <div class="dataHandleNum"></div>
                <div class="dataSmokeSum"></div>
                <div class="listBox">
                    <div class="item item0" style="font-size: 16px;color: #7eff71;">一般火险场所</div>
                    <div class="item item1" style="font-size: 16px;color: #e4ba23;">较大火险场所</div>
                    <div class="item item2" style="font-size: 16px;color: #e65056;">高危火险场所</div>
                    <div class="list list0">
                        <div class="earlyWarningColor">
                            <div class="earlyWarningColorHid">
                                <div class="table">
                                    <p>1.万松岭路55号快餐店</p>

                                    <p>2.万松岭路55号-3薇蜜咖啡</p>

                                    <p>3.万松岭路59号万林百货店</p>

                                    <p>4.万松岭路61号丹桂旅馆</p>

                                    <p>5.笤帚湾路64号一帅酒家</p>

                                    <p>6.笤帚湾路79号蒋胜男工作室</p>

                                    <p>7.笤帚湾路80号利君超市</p>

                                    <p>8.笤帚湾路90号服装洗烫店</p>

                                    <p>9.笤帚湾路90号迈克造型</p>

                                    <p>10.笤帚湾路90号-1杂货店</p>

                                    <p>11.笤帚湾路92号-1旅游咨询中心</p>

                                    <p>12.馒头山路20-28服装店</p>

                                    <p>13.宋城路2号体育彩票店</p>

                                    <p>14.宋城路2号水果店</p>

                                    <p>15.宋城路3号面店</p>

                                    <p>16.凤凰山脚路1幢底馄饨店</p>

                                    <p>17.凤凰山脚路1幢底大同包子</p>

                                    <p>18.凤凰山脚路4幢101老酒店</p>

                                    <p>19.凤凰山脚路58号王爱芝百货商店</p>

                                    <p>20.凤凰山脚路121号干货蔬菜店</p>

                                    <p>21.凤凰山脚路121号-1创捷名片</p>

                                    <p>22.凤凰山脚路218号帝头饮食店</p>

                                    <p>23.凤凰山脚路230号沙县小吃</p>

                                    <p>24.凤凰山脚路230号松山水果</p>

                                    <p>25.凤山新村214号中国体育彩票</p>

                                    <p>26.凤山新村214号平儿面馆</p>

                                    <p>27.凤山新村214号凤昌水果店</p>

                                    <p>28.凤山新村214号水饺店</p>

                                    <p>29.凤凰山脚路7号-1丰平文化</p>

                                    <p>30.凤凰山脚路167号筑巢文化</p>

                                    <p>31.凤凰山脚路166号美术职业学校</p>

                                    <p>32.宋城路5号少年军校总校</p>

                                    <p>33.宋城路93号陈经纶体育学校</p>

                                    <p>34.宋城路11号乾宁斋</p>

                                    <p>35.梵天寺路48号天一堂梨膏糖厂</p>

                                    <p>36.梵天寺路89号六一幼儿园</p>

                                    <p>37.梵天寺路54号馒头山邻里中心</p>

                                    <p>38.梵天寺路20号出租房</p>

                                    <p>39.梵天寺路21-8号出租房</p>

                                    <p>40.梵天寺路29-30号出租房</p>

                                    <p>41.梵天寺路32-41号出租房</p>

                                    <p>42.梵天寺路43-47号出租房</p>

                                    <p>43.梵天寺路49号出租房</p>

                                    <p>44.梵天寺路50号出租房</p>

                                    <p>45.梵天寺路54号出租房</p>

                                    <p>46.梵天寺路55号出租房</p>

                                    <p>47.梵天寺路56号-1出租房</p>

                                    <p>48.梵天寺路57-66号出租房</p>

                                    <p>49.梵天寺路67-68号出租房</p>

                                    <p>50.梵天寺路69-70号出租房</p>

                                    <p>51.梵天寺路71-82号出租房</p>

                                    <p>52.笤帚湾路49号出租房</p>

                                    <p>53.笤帚湾路87号出租房</p>

                                    <p>54.凤凰山脚路61-67号出租房</p>

                                    <p>55.凤凰山脚路68-72号出租房</p>

                                    <p>56.凤凰山脚路73-82号出租房</p>

                                    <p>57.凤凰山脚路83-90号出租房</p>

                                    <p>58.凤凰山脚路97-101号出租房</p>

                                    <p>59.凤凰山脚路103-112号出租房</p>

                                    <p>60.凤凰山脚路122-125号出租房</p>

                                    <p>61.凤凰山脚路145号出租房</p>

                                    <p>62.凤凰山脚路146号出租房</p>

                                    <p>63.凤凰山脚路147号出租房</p>

                                    <p>64.宋城路1号出租房</p>

                                    <p>65.宋城路7-9号出租房</p>

                                    <p>66.宋城路29-35号出租房</p>

                                    <p>67.宋城路68-70号出租房</p>

                                    <p>68.宋城路71号出租房</p>

                                    <p>69.宋城路72-79号出租房</p>

                                    <p>70.宋城路80号出租房</p>

                                    <p>71.宋城路81号出租房</p>

                                    <p>72.宋城路82-84号出租房</p>

                                    <p>73.宋城路85号出租房</p>

                                    <p>74.宋城路85-1号出租房</p>

                                    <p>75.宋城路85-2号出租房</p>

                                    <p>76.宋城路87-1号出租房</p>

                                    <p>77.宋城路92号出租房</p>

                                    <p>78.宋城路325出租房</p>

                                    <p>79.宋城路93号出租房</p>

                                    <p>80.宋城路322-323号出租房</p>

                                    <p>81.宋城路320号出租房</p>

                                    <p>82.宋城路38-42号出租房</p>

                                    <p>83.宋城路213号出租房</p>

                                    <p>84.宋城路218-1号出租房</p>

                                    <p>85.宋城路214-216号出租房</p>

                                    <p>86.宋城路36-48号出租房</p>

                                    <p>87.宋城路50号出租房</p>

                                    <p>88.宋城路200-202号出租房</p>

                                    <p>89.宋城路203-205号出租房</p>

                                    <p>90.凤凰新村1幢重点建筑</p>

                                    <p>91.凤凰新村2幢重点建筑</p>

                                    <p>92.凤凰新村3幢重点建筑</p>

                                    <p>93.凤凰新村4幢重点建筑</p>

                                    <p>94.凤凰新村5幢重点建筑</p>

                                    <p>95.凤凰新村6幢重点建筑</p>

                                    <p>96.凤凰新村7幢重点建筑</p>

                                    <p>97.凤凰新村8幢重点建筑</p>

                                    <p>98.凤凰新村9幢重点建筑</p>

                                    <p>99.凤凰新村10幢重点建筑</p>

                                    <p>100.凤凰新村11幢重点建筑</p>

                                    <p>101.凤凰新村12幢重点建筑</p>

                                    <p>102.凤凰新村13幢重点建筑</p>

                                    <p>103.凤凰新村14幢重点建筑</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list list1" style="display:none;">
                        <div class="earlyWarningColor">
                            <div class="earlyWarningColorHid">
                                <div class="table">
                                    <p>1.笤帚湾路64号一帅酒家</p>

                                    <p>2.笤帚湾路90号兴隆通信</p>

                                    <p>3.宋城路4号-1食品店</p>

                                    <p>4.凤凰山脚路1幢底老李面馆</p>

                                    <p>5.凤凰山脚路2幢底骆竹根小吃店</p>

                                    <p>6.凤凰山脚路230号小缪食品</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list list2" style="display:none;">
                        <div class="earlyWarningColor">
                            <div class="earlyWarningColorHid">
                                <div class="table">
                                    <p>1.万松岭路63号杭盛综合</p>

                                    <p>2.笤帚湾路62号乐活超市</p>

                                    <p>3.笤帚湾路80号伊品牛肉面</p>

                                    <p>4.馒头山路21-6小拇指</p>

                                    <p>5.凤凰山脚路157号沈陆记综合商店</p>

                                    <p>6.凤凰山脚路229号平刚小吃</p>

                                    <p>7.凤山新村214号合佳综合商店</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- <img src="/public/images/dataStatistics.png"> -->
                <!-- <div class="statisticsList">
                    <div id="statisticsCanvas" style="height:400px;width: 400px;padding: 20px"></div>
                </div>
                <div class="statisticsList">
                    <div id="handleSpeed" style="height:400px;width: 400px;padding: 20px"></div>
                </div>
                <div class="statisticsList">
                    <div id="alarmSource" style="height:400px;width: 400px;padding: 20px"></div>
                </div>
                <div class="statisticsList"></div>
                <div class="statisticsList"></div>
                <div class="statisticsList"></div> -->
            </div>
        
        </aside>
        <script>
            // 获取到这个DOM节点，然后初始化
            dataSumAlarmFunc();
            function dataSumAlarmFunc() {
                var beginTime = moment().add('days', -6).format('YYYY-MM-DD') + " 00:00:00";
                var endTime = moment().add('days', 0).format('YYYY-MM-DD') + " 23:59:59";
                $.ajax({
                    url: '/alarm/data/device/firecount?beginTime=' + beginTime + '&endTime=' + endTime + '&alarmTypeId=1',
                    success: function (result) {
                        console.log(result)
                        $(".dataSumAlarm").text(result.data)
                    }
                })
            }
            $(function () {
                //大数据时间显示
                $(".dataStatistics .timeRun").text(moment().format('YYYY-MM-DD HH:mm:ss'));
                setInterval(function () {
                    $(".dataStatistics .timeRun").text(moment().format('YYYY-MM-DD HH:mm:ss'));
                }, 1000);


                //点击三色预警切换
                $(".dataStatistics .item1").on('click', function () {
                    $(".dataStatistics .list0").hide();
                    $(".dataStatistics .list2").hide();
                    $(".dataStatistics .list1").show();
                    $(".dataStatistics .listBox").css('background', 'url(/public/images/highDanger.png) no-repeat');
                    /* $(this).siblings().hide();
                     $(this).parent().find(".earlyWarningColor").show(); */
                });
                $(".dataStatistics .item2").on('click', function () {
                    $(".dataStatistics .list0").hide();
                    $(".dataStatistics .list1").hide();
                    $(".dataStatistics .list2").show();
                    $(".dataStatistics .listBox").css('background', 'url(/public/images/normalDanger.png) no-repeat');
                    /* $(this).siblings().hide();
                     $(this).parent().find(".earlyWarningColor").show(); */
                });
                $(".dataStatistics .item0").on('click', function () {
                    $(".dataStatistics .list0").show();
                    $(".dataStatistics .list1").hide();
                    $(".dataStatistics .list2").hide();
                    $(".dataStatistics .listBox").css('background', 'url(/public/images/middleDanger.png) no-repeat');
                    /* $(this).siblings().hide();
                     $(this).parent().find(".earlyWarningColor").show(); */
                });

                //点击关闭按钮
                $(".statisticsClose").on("click", function () {
                    console.log(22)
                    //移除右部侧边栏
                    $(".openPublicSidebar").removeClass("control-sidebar-open");
                    return false;
                });

            })
        </script>
        <script type="text/javascript">
            //点击历史消息按钮，根据设备类型画柱状图
            //var alarmDateArr;


            $(document).on('click', function () {
                $('.openPublicSidebar').removeClass("control-sidebar-open")
            });

            $('.openPublicSidebar').on('click', function () {
                $('.openPublicSidebar').addClass("control-sidebar-open")
                return false;
            });
            $(".historybtn .alarmhistorybtn").off().on("click", function () {
                $(this).addClass("active").siblings().removeClass("active");
                $(".historyList .tab-pane").eq(1).addClass("active").siblings().removeClass("active");
                return false;
            });
            $(".historybtn .faulthistorybtn").off().on("click", function () {
                $(this).addClass("active").siblings().removeClass("active");
                $(".historyList .tab-pane").eq(0).addClass("active").siblings().removeClass("active");
                return false;
            });
            $(".historybtn .lowhistorybtn").off().on("click", function () {
                $(this).addClass("active").siblings().removeClass("active");
                $(".historyList .tab-pane").eq(2).addClass("active").siblings().removeClass("active");
                return false;
            });
            var alarmDateArr = [];
            var alarmTypeCode;
            var deviceTypeId;
            $(".historyTwinkle").on("click", function () {
                //if($(".control-sidebar.control-sidebar-open").length=="1"){
                //control-sidebar   control-sidebar-open
                /* if(devType == "smokeDetector"){
                 sevenAlarmSum ();
                 alarmBar();
                 } */
                if ($(".control-sidebar.control-sidebar-open")) {
                    alarmDateArr = [];
                    alarmTypeCode;
                    deviceTypeId;
                    /* var alarmDateArr=[];
                     var alarmTypeCode;
                     var deviceTypeId; */
                    if (devHeader == "smokeHeader") {
                    	console.log(11111)
                        $(".alarmhistorybtn i").removeClass("cover-alarm-tab").addClass("fire-alarm-tab");
                        alarmTypeCode = "001";
                        deviceTypeId = "001";
                        sevenAlarmSum(alarmTypeCode, deviceTypeId, alarmDateArr);
                        alarmBar(alarmDateArr);
                        statisticsalarmBar(alarmDateArr);
                    } else if (devHeader == "manholeCoverHeader") {
                    	console.log(2222222222)
                        $(".alarmhistorybtn i").removeClass("fire-alarm-tab").addClass("cover-alarm-tab");
                        deviceTypeId = "005";
                        alarmTypeCode = "010";
                        sevenAlarmSum(alarmTypeCode, deviceTypeId, alarmDateArr);
                        alarmBar(alarmDateArr);
                    } else if (devHeader == "humitureHeader") {
                    	console.log(33333333)
                        $(".alarmhistorybtn i").removeClass("fire-alarm-tab").addClass("cover-alarm-tab");
                        deviceTypeId = "007";
                        alarmTypeCode = "061";
                        sevenAlarmSum(alarmTypeCode, deviceTypeId, alarmDateArr);
                        alarmBar(alarmDateArr);

                    }

                    return false;
                }
            });

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('myChart'));
            /* x轴坐标 */
            var sevenDayX = [
                moment().add('days', -6).format('DD' + '日'),
                moment().add('days', -5).format('DD' + '日'),
                moment().add('days', -4).format('DD' + '日'),
                moment().add('days', -3).format('DD' + '日'),
                moment().add('days', -2).format('DD' + '日'),
                moment().add('days', -1).format('DD' + '日'),
                moment().add('days', 0).format('DD' + '日'),
            ];
            var sevenDayX1 = [
                moment().add('days', -6).format('DD' + '日'),
                moment().add('days', -5).format('DD' + '日'),
                moment().add('days', -4).format('DD' + '日'),
                moment().add('days', -3).format('DD' + '日'),
                moment().add('days', -2).format('DD' + '日'),
                moment().add('days', -1).format('DD' + '日'),
                moment().add('days', 0).format('DD' + '日'),
            ];
            /* 判断请求的日期与坐标轴的日期是否相等 */
            var sevenDay = [
                moment().add('days', -6).format('YYYY-MM-DD'),
                moment().add('days', -5).format('YYYY-MM-DD'),
                moment().add('days', -4).format('YYYY-MM-DD'),
                moment().add('days', -3).format('YYYY-MM-DD'),
                moment().add('days', -2).format('YYYY-MM-DD'),
                moment().add('days', -1).format('YYYY-MM-DD'),
                moment().add('days', 0).format('YYYY-MM-DD'),
            ];
            /* 请求url传入的起止时间  */
            var beginTime = moment().add('days', -6).format('YYYY-MM-DD') + " 00:00:00";
            var endTime = moment().add('days', 0).format('YYYY-MM-DD') + " 23:59:59";
            /* 获取实时的柱状图报警信息 */
            function alarmTime(time, alarmTypeCode, deviceTypeId) {
                //火警传来时，如果当天没有火警发生记为1，发生则加1
                if (alarmDateArr[sevenDay.length - 1]) {
                    if (sevenDay[sevenDay.length - 1] == time) {
                        alarmDateArr[sevenDay.length - 1] += 1;
                        alarmBar();
                        statisticsalarmBar();
                        return alarmDateArr;
                    } else {
                        sevenAlarmSum();
                        alarmBar(alarmDateArr);
                        statisticsalarmBar(alarmDateArr);
                    }
                } else {
                    alarmDateArr[sevenDay.length - 1] = 1;
                    alarmBar(alarmDateArr);
                    statisticsalarmBar(alarmDateArr);
                    return alarmDateArr;
                }
            }
            function alarmTime1() {
                var alarmDateArr = [];
                var alarmTypeCode;
                var deviceTypeId;
                if (devHeader == "smokeHeader") {
                    $(".alarmhistorybtn i").removeClass("cover-alarm-tab").addClass("fire-alarm-tab");
                    alarmTypeCode = "001";
                    deviceTypeId = "001";
                    sevenAlarmSum(alarmTypeCode, deviceTypeId, alarmDateArr);
                    alarmBar(alarmDateArr);
                    statisticsalarmBar(alarmDateArr);


                } else if (devHeader == "manholeCoverHeader") {
                    $(".alarmhistorybtn i").removeClass("fire-alarm-tab").addClass("cover-alarm-tab");
                    deviceTypeId = "005";
                    alarmTypeCode = "010";
                    sevenAlarmSum(alarmTypeCode, deviceTypeId, alarmDateArr);
                    alarmBar(alarmDateArr);
                } else if (devHeader == "humitureHeader") {
                    $(".alarmhistorybtn i").removeClass("fire-alarm-tab").addClass("cover-alarm-tab");
                    deviceTypeId = "007";
                    alarmTypeCode = "061";
                    sevenAlarmSum(alarmTypeCode, deviceTypeId, alarmDateArr);
                    alarmBar(alarmDateArr);
                }
            }
            /*  获取七天内报警数据 "/alarm/data/org/count/"+beginTime+"/"+endTime,/alarm/data/org/device/count?beginTime="+beginTime+"&endTime="+endTime+"&alarmTypeCode="+alarmTypeCode+"&deviceTypeId="+deviceTypeId, */

            function sevenAlarmSum(alarmTypeCode, deviceTypeId, alarmDateArr) {
                $.ajax({
                    type: "GET",
                    url: "/alarm/data/org/device/count?beginTime=" + beginTime + "&endTime=" + endTime + "&alarmTypeCode=" + alarmTypeCode + "&deviceTypeId=" + deviceTypeId,
                    async: false, //同步执行
                    dataType: "json", //返回数据形式为json
                    success: function (result) {
                        if (result) {
                            for (var i = 0; i < result.data.length; i++) {
                                if (sevenDay[0] == result.data[i][0]) {
                                    alarmDateArr[0] = result.data[i][1];
                                } else if (sevenDay[1] == result.data[i][0]) {
                                    alarmDateArr[1] = result.data[i][1];
                                } else if (sevenDay[2] == result.data[i][0]) {
                                    alarmDateArr[2] = result.data[i][1];
                                } else if (sevenDay[3] == result.data[i][0]) {
                                    alarmDateArr[3] = result.data[i][1];
                                } else if (sevenDay[4] == result.data[i][0]) {
                                    alarmDateArr[4] = result.data[i][1];
                                } else if (sevenDay[5] == result.data[i][0]) {
                                    alarmDateArr[5] = result.data[i][1];
                                } else if (sevenDay[6] == result.data[i][0]) {
                                    alarmDateArr[6] = result.data[i][1];
                                }
                                //alarmDateArr.push(result.data[i][1]);
                            }
                        }
                    },
                    error: function (errorMsg) {
                        console.log("不好意思，图表请求数据失败啦!");
                        myChart.hideLoading();
                    }
                });
                return alarmDateArr;
            }
            ;
            // alarmBar();
            function alarmBar(alarmDateArr) {
                // 指定图表的配置项和数据
                var option = {
                    color: ['#3398DB'],
                    title: {
                        //text: '七日内的报警统计',
                        textStyle: {
                            fontWeight: 'normal',
                            color: '#fff'
                        },
                    },
                    tooltip: {},
                    legend: {
                        data: ['报警数量'],
                        x: "right",
                        padding: 10,
                        textStyle: {
                            fontWeight: 'normal',
                            color: '#fff'
                        },
                        selectedMode: false,//禁止点击
                    },
                    xAxis: {
                        data: sevenDayX,
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            },
                        },
                    },
                    yAxis: {
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                    },
                    series: [{
                        name: '报警数量',
                        type: 'bar',
                        data: alarmDateArr,
                        barWidth: 28,
                        label: {
                            normal: {
                                show: true,            //显示数字
                                position: 'top',       //这里可以自己选择位置
                                color: '#fff',
                            }
                        },
                    }],
                    grid: {

                        left: '10',
                        right: '10',
                        bottom: '10',
                        top: '40',
                        containLabel: true
                    },
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

            //---------新数据------------
            var statisticsCanvas;
            //var sevenAlarmCanvas = echarts.init(document.getElementById("sevenAlarmCanvas"));
            function statisticsalarmBar(alarmDateArr) {
                statisticsCanvas = echarts.init(document.getElementById("statisticsCanvas"));
                var statisticsoption = {
                    color: ['#3398DB'],
                    title: {
                        //text: '七日内的报警统计',
                        textStyle: {
                            fontWeight: 'normal',
                            color: '#fff'
                        },
                    },
                    tooltip: {},
                    legend: {
                        data: ['报警数量'],
                        x: "right",
                        padding: 10,
                        textStyle: {
                            fontWeight: 'normal',
                            color: '#fff'
                        },
                        selectedMode: false,//禁止点击
                    },
                    xAxis: {
                        //data: ['01','02','03','04','05','06','07'],
                        data: sevenDayX1,
                        boundaryGap: false,

                        textStyle: {
                            fontWeight: 'normal',
                            color: '#fff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            },
                        },
                    },
                    yAxis: [
                        {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: '#fff'
                                }
                            },
                            textStyle: {
                                fontWeight: 'normal',
                                color: '#fff'
                            },
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        }
                    ],
                    series: [

                        {
                            name: '报警数量',
                            type: 'line',
//		                   stack: '总量',
                            symbolSize: 4,
                            smooth: false,   //关键点，为true是不支持虚线的，实线就用true
                            symbolSize: 8,//拐点大小
                            symbol: 'circle',//拐点样式
                            color: '#e55454',
                            barWidth: 28,
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        color: '#e55454',
                                        width: 2,
                                        type: 'solid'  //'dotted'虚线 'solid'实线
                                    }
                                }
                            },
                            data: alarmDateArr,
                        },
                    ],

                    grid: {

                        left: '10',
                        right: '15',
                        bottom: '10',
                        top: '40',
                        containLabel: true
                    },
                };
                statisticsCanvas.setOption(statisticsoption);
                //sevenAlarmCanvas.setOption(statisticsoption);
            }
            //statisticsFocusNum
            //statisticsFocusAdd
            /* 大数据重点关注*/

            //dataGuanZhuTIme();
            //console.log(BaiDuMap.deletePoint())
            function dataGuanZhuTIme() {
                var statisticsFocusNum = [];
                var statisticsFocusAdd = [];
                var statisticsFocusAdd1 = [];
                var beginTime = moment().add('days', -6).format('YYYY-MM-DD') + " 00:00:00";
                var endTime = moment().add('days', 0).format('YYYY-MM-DD') + " 23:59:59";

                $.ajax({
                    url: "/alarm/data/device/count?beginTime=" + beginTime + "&endTime=" + endTime + "&alarmTypeCode=1&deviceTypeId=001",
                    type: 'GET',
                    async: false, //同步执行
                    success: function (result) {
                        console.log(result)
                        if (result.status == 200) {
                            for (var i = 0; i < result.data.length; i++) {
                                var data = result.data[i];
                                focusNum = data[1];
                                console.log(statisticsFocusNum, statisticsFocusAdd)
                                statisticsFocusNum.push(focusNum);
                                statisticsFocusAdd.push(data[0].address);
                                statisticsFocusAdd1.push(i + 1 + "号")
                                $(".dataGuanZhu-list").append('<p>' + data[0].address + '</p>');
                            }
                        } else {
                            //winTip.alert(result.message);
                        }
                    }
                });
                var dataGuanZhu = echarts.init(document.getElementById("dataGuanZhu"));

                var dataGuanZhuoption = {
                    color: ['#e34856'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['数量'],
                        selectedMode: false,//禁止点击
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: statisticsFocusAdd,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#fff',
                                }
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 10
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: '#fff'
                                }
                            },
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        }
                    ],
                    series: [
                        {
                            //name: '111',
                            type: 'bar',
                            barWidth: 28,
                            data: statisticsFocusNum,
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        color: '#e55454'
                                    }
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    color: '#fff',
                                }
                            },
                            //data: [18203, 23489, 29034, 104970, 131744, 630230]
                        },

                    ]
                };

                dataGuanZhu.setOption(dataGuanZhuoption);
            }
            //大数据实时重点关注
            function dataGuanZhuTIme1(no) {
                var statisticsFocusNum = [];
                var statisticsFocusAdd = [];
                var statisticsFocusAdd1 = [];
                var statisticsFocusCode = [];
                var beginTime = moment().add('days', -6).format('YYYY-MM-DD') + " 00:00:00";
                var endTime = moment().add('days', 0).format('YYYY-MM-DD') + " 23:59:59";
                $.ajax({
                    url: "/alarm/data/device/count?beginTime=" + beginTime + "&endTime=" + endTime + "&alarmTypeCode=1&deviceTypeId=001",
                    type: 'GET',
                    async: false, //同步执行
                    success: function (result) {
                        console.log(result)
                        if (result.status == 200) {
                            $(".dataGuanZhu-list").html("<p></p>")
                            for (var i = 0; i < result.data.length; i++) {
                                var data = result.data[i];
                                focusNum = data[1];
                                console.log(statisticsFocusNum, statisticsFocusAdd)
                                statisticsFocusNum.push(focusNum);
                                statisticsFocusAdd.push(data[0].address);
                                statisticsFocusCode.push(data[0].devCode);
                                statisticsFocusAdd1.push(i + 1 + '号')
                                $(".dataGuanZhu-list").append('<p>' + data[0].address + '</p>');
                            }
                        } else {
                            //winTip.alert(result.message);
                        }
                    }
                });
                for (var i = 0; i < statisticsFocusCode.length; i++) {
                    if (statisticsFocusCode[i] == no) {
                        var dataGuanZhu = echarts.init(document.getElementById("dataGuanZhu"));
                        var dataGuanZhuoption = {
                            color: ['#e34856'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            legend: {
                                data: ['数量'],
                                selectedMode: false,//禁止点击
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: statisticsFocusAdd,
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            color: '#fff'
                                        }
                                    },
                                    axisLabel: {
                                        interval: 0,
                                        rotate: 10
                                    },
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    axisLine: {
                                        lineStyle: {
                                            color: '#fff'
                                        }
                                    },
                                    axisLabel: {
                                        formatter: '{value} 次'
                                    }
                                }
                            ],
                            series: [
                                {
                                    //name: '111',
                                    type: 'bar',
                                    barWidth: 28,
                                    data: statisticsFocusNum,
                                    itemStyle: {
                                        normal: {
                                            lineStyle: {
                                                color: '#e55454'
                                            }
                                        }
                                    },
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'top',
                                            color: '#fff',
                                        }
                                    },
                                    //data: [18203, 23489, 29034, 104970, 131744, 630230]
                                },

                            ]
                        };
                        dataGuanZhu.setOption(dataGuanZhuoption);
                    }
                }

            }
        </script>
    </div>
</div>

</body>
</html>